<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorate="~{layouts/layout}">
  <head>
    <meta charset="utf-8">
    <title>Roles | Strass</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
	<link th:href="@{/css/site.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-responsive.css}" rel="stylesheet">
	<script th:src="@{/js/html5.js}"></script>
  </head>
  <body>
	<th:block layout:fragment="content">
		<div class="span9">
			<div class="row-fluid">
				<div class="page-header">
					<h1>Roles <small>Manage roles</small></h1>
				</div>
				<table class="table table-striped table-bordered table-condensed">
					<thead>
					<tr>
						<th>ID</th>
						<th>Role</th>
						<th>Description</th>
						<th>Slug</th>
						<th></th>
					</tr>
					</thead>
					<tbody>
					<tr class="list-roles">
						<td>1</td>
						<td>Admin</td>
						<td>Aliquam erat volutpat. Vivamus molestie tempor pellentesque. Praesent lobortis, neque.</td>
						<td>admin</td>
						<td>
							<div class="btn-group">
								<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
								<ul class="dropdown-menu pull-right">
									<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
									<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
								</ul>
							</div>
						</td>
					</tr>
					<tr class="list-roles">
						<td>2</td>
						<td>Moderator</td>
						<td>Phasellus scelerisque, quam ac bibendum pulvinar, erat ligula pulvinar risus, in ultricies...</td>
						<td>mod</td>
						<td>
							<div class="btn-group">
								<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
								<ul class="dropdown-menu pull-right">
									<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
									<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
								</ul>
							</div>
						</td>
					</tr>
					<tr class="list-roles">
						<td>3</td>
						<td>User</td>
						<td>Donec cursus, velit eu fermentum ullamcorper, libero est.</td>
						<td>user</td>
						<td>
							<div class="btn-group">
								<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Actions <span class="caret"></span></a>
								<ul class="dropdown-menu pull-right">
									<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
									<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
								</ul>
							</div>
						</td>
					</tr>
					</tbody>
				</table>
				<a th:href="@{/new-role}" class="btn btn-success">New Role</a>
			</div>
		</div>
	</th:block>

	<script>
		$(document).ready(function() {
			$('.dropdown-menu li a').hover(
			function() {
				$(this).children('i').addClass('icon-white');
			},
			function() {
				$(this).children('i').removeClass('icon-white');
			});
		});
	</script>
  </body>
</html>
